<!--公共头部-->
{template 'aitimt/common/header'}
<style>
	.mui-table-view .mui-media, .mui-table-view .mui-media-body{line-height: 2rem;}
	.mui-slider-indicator.mui-segmented-control .mui-control-item {border-bottom: 1px solid rgba(0,0,0,0.05);line-height: 30px;padding: 1px;color: #585858;}
	.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{color: #585858;}
	.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active:after{content: '';position: absolute;bottom: 0;height: 3px;width: 22%;display: -webkit-box;margin-left: 5%;background-color: #E94709;}
	.mui-slider .mui-slider-group .mui-slider-item img{width: 70%;max-height:60px;margin: 10px 10px 0 10px;}
	.field {background-color: #FFFFFF;display: inline-block;border-bottom: #EEEEEE 1px solid;}
	.field .left-content {float: left;width: 25%;}
	.field .left-content p{text-align: center;}
	.field .event-content {float: right;width: 72%;padding-top: 10px;margin-right: 10px;}
	.field .event-content .event-no{font-size: 10px;margin: 0;padding: 0;}
	.field .event-content .event-title{font-size: 14px;color: #000000;}
	.field .event-content .event-pro{font-size: 12px;margin:0;white-space:normal;word-break:break-all;word-wrap:break-word;}
	.field .event-content .event-price{font-size: 10px;}
	.mui-bar-tab .mui-tab-item.mui-active{color: #ea4609;}
	.addtime{font-size: 10px;margin: 0;}
	.event-tit{color:#000;font-size: 15px;font-weight: bold;margin: 0;}
	.good-title{margin: 0;}
	.good-pro{     display: inline-block;
        /* padding: 0 5%; */
        margin: 1px 0;
        width: 100%;}
	.good-content{width: 84%;float: right;white-space:normal;word-break:break-all;word-wrap:break-word;}
	.comment-avatar img{ border-radius: 40px;width: 50px!important;margin: 10px 0 0 0!important;}
	.comment-img img{ width: 90px!important;height: 80px;margin: 10px 0 0 0!important;}
	.comment-pro{width: 50%;float: left;margin-top: 10px;}
	.comment-content{white-space:normal;word-break:break-all;word-wrap:break-word;}
	.comment-list,.good-list{padding: 0 5%}
	.mui-icon-chatboxes-filled{color: #00b7ee;margin-left: 20px;font-size: 15px;}
	.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item{border: 0;}
</style>
<!-- 公共头部start -->
<header class="mui-bar mui-bar-nav">
	<a class="top-return mui-action-back"><img src="{$aideUrl}app/resource/aitimt/images/return.png" ></a>
	<a class="top-logo"><img src="{$aideUrl}app/resource/aitimt/images/logo.png" ></a>
	<!--公共菜单start -->
	{template 'aitimt/common/menu'}
	<!-- 公共菜单end-->
</header>
<!-- 公共头部end -->
<div class="mui-content">
	<div id="slider" class="mui-slider" style="background:#fff;">
		<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" style="background: #eeeeee">
			<a class="mui-control-item" style="display: none" href="#item1mobile" data-status='-1'>全部</a>
			{php $itemNum=0;}
			{loop $cateList $k $v}
			<a class="mui-control-item {if $k==0} mui-active{/if} " href="#item{php echo $itemNum+2}mobile" data-status="{php echo $k+1}">{$v}</a>
			{php $itemNum++;}
			{/loop}

		</div>
		<div class="mui-slider-group" style="height:100%">
			<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
				<div class="mui-scroll-wrapper-ext">
					<div class="mui-scroll-ext">
						<div class="list-content"></div>
					</div>
				</div>
			</div>
			{php $itemNum=0;}
			{loop $cateList $k $v}
			<div id="item{php echo $itemNum+2}mobile" class="mui-slider-item mui-control-content">
				<div class="mui-scroll-wrapper-ext">
					<div class="mui-scroll-ext">
						<div class="list-content">
							<div class="mui-loading">
								<div class="mui-spinner"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			{php $itemNum++;}
			{/loop}
		</div>
	</div>
</div>
<!-- 公共底部start -->
{template 'aitimt/common/nav'}
<!-- 公共底部end -->
<script>
    //屏蔽slider选项卡弹出遮罩
    $('.mui-control-item').on("tap",function(e) {
        $("body").addClass('mui-backdrop-none');
        setTimeout(function() {
            $("body").find('.mui-backdrop').remove();
            $("body").removeClass('mui-backdrop-none');
        });
    });
    function toReply(url) {
        window.location.href=url;
    }
    //上拉加载活动列表
    var loadItem=function(id,sn,status){
        var thispage = 1,pagesize = 10;
        var counter=0;//计数器
        $(id).find('.mui-scroll-ext').dropload({
            scrollArea : $(id).find('.mui-scroll-wrapper-ext'),
            loadDownFn : function(me){
                $.ajax({
                    type: 'GET',
                    url: "{php echo app_url('home/index/myremind')}",
                    data: {page:thispage,pagesize:pagesize,status:status},
                    dataType: 'json',
                    success: function(data){
                        var stime = new Date(),result='';
                        console.log(data)
                            me.lock();// 锁定
                            me.noData();// 无数据
                        if (data.list == []){
                            result = '<div class="no-orders-at-all">'
                                +'<div class="head-block">'
                                +'    <div class="blank-icon mui-ext-icon mui-icon-mhuodong"></div>'
                                +'    <p class="hint">当前没有任何信息</p>'
                                +'    <p class="recommend-hint"></p>'
                                +'</div></div>';
                            $(id).find('.list-content').append(result);
                            me.resetload();
                            return false;
                        }
                        if (status==1){
                            for(var i = 0; i < data.list.length; i++){
                                data.list[i].image='{$aideUrl}app/resource/aitimt/images/login01.png';
                                result+= '<div class="field">\n' +
                                    '           <div class="left-content">\n'+
                                    '         		<img src='+data.list[i].image+'>\n' +
                                    '			</div>\n'+
                                    '        <div class="event-content">\n' +
                                    '         <span class="event-title">【爱计时】@您:</span>\n' +
                                    '         <p class="event-pro">'+data.list[i].intro+'</p>\n' +
                                    ' 		  <p class="addtime">'+data.list[i].created_at+'</p>\n' +
                                    '        </div>\n' +
                                    '       </div>'
                            }

                        } else if(status==2){
                            for(var i = 0; i < data.list.length; i++){
                                var url="{php echo app_url('home/index/detail')}"+'&activityid='+data.list[i].aid;
                                data.list[i].image=data.list[i].thumb?"{$_W['attachurl']}/"+data.list[i].thumb:'{$aideUrl}app/resource/aitimt/images/login01.png';
                                result+= '<div class="field" style="width: 100%;">\n' +
                                   '          <div class="comment-list">\n' +
                                    '            <div class="comment-avatar" style="width:20%;float: left">\n' +
                                    '            <img src='+data.list[i].avatar+' alt="">\n' +
                                    '            </div>\n' +
                                    '            <div class="comment-pro">\n' +
                                    '            '+data.list[i].nickname+'回复您:<div class="comment-content" style="margin: 5px 10px;">'+data.list[i].content+'\n' +
                                    '            </div>\n' +
                                    '            <span class="addtime">'+data.list[i].created_at+'</span>\n' +
                                    '            <a class="mui-icon mui-icon-chatboxes-filled" href="'+url+'"><span style="font-size: 10px">去回复</span> </a>\n' +
                                    '            </div>\n' +
                                    '            <div class="comment-img" style="float:right;">\n' +
                                    '            <img src='+data.list[i].image+' alt="">\n' +
                                    '            </div>\n' +
                                    '            </div>\n' +
                                    '       </div>'
                            }
						}else if(status==3){
                            for(var i = 0; i < data.list.length; i++){
                                result+= '<div class="field" style="width: 100%;">\n' +
                                    '        <div class="good-list">\n' +
                                    '         <p class="good-title">'+data.list[i].good+'人赞了你</p>\n' +
									'         <div class="good-pro">'+data.list[i].nickname+':<div class="good-content">'+data.list[i].content+'</div></div>\n'+
                                    ' 		  <p class="addtime">'+data.list[i].created_at+'</p>\n' +
                                    '        </div>\n' +
                                    '       </div>'
                            }
						}
                        thispage++;
                        $(id).find('.list-content').append(result);
                        // 每次数据加载完，必须重置
                        me.resetload();
                    },
                    error: function(xhr, type){
                        // alert('加载失败，请刷新下重试!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            }
        });
    }
    $(function() {
        var item_index = parseInt('{$index}');
        if (item_index){
            mui('#slider').slider().gotoItem(item_index);
            $('#item1mobile').find('.list-content').append('<div class="mui-loading"><div class="mui-spinner"></div></div>');
        }else{
            loadItem('#item1mobile',0,$('.mui-control-item.mui-active').data("status"));
        }
    });
    //滑动效果
    (function(m) {
        var htmlFont = $("html").css("font-size").replace('px',''),
            itemWidth = new Array(),
            itemID =  new Array(),
            transX = 0;
        $(".mui-control-item").each(function(key){
            itemWidth[key]=$(this).width();//初始化每个control-item的宽度
            itemID[key]=document.getElementById('item'+(key+1)+'mobile');//初始slider-item,ID
        });
        //alert($(itemID[0]).find('.mui-scroll-wrapper-ext').html());
        $('#sliderProgressBar').css("width",itemWidth[0]);
        document.getElementById('slider').addEventListener('slide', function(e) {
            var sn = e.detail.slideNumber,//初始化当前被激活的item序号
                itemX=0;
            //初始化每次进度条滑动的距离
            for (var i = 0; i < sn; i++ ){
                itemX += itemWidth[i];
            }
            transX = itemX/htmlFont+0.7*sn;
            //$('#sliderProgressBar').stop().animate({left:transX+'rem'},200);
            $('#sliderProgressBar').css('left',transX+'rem');
            setTimeout(function() {
                $('#sliderProgressBar').css('width',itemWidth[sn]);
            }, 150);
            if (itemID[sn].querySelector('.mui-loading')) {
                setTimeout(function() {
                    itemID[sn].querySelector('.list-content').innerHTML = '';
                    loadItem(itemID[sn],sn,$('.mui-control-item.mui-active').data("status"));
                }, 600);

            }
        });
    })(mui);

</script>
</body>
</html>
